<template>
	<view>
		<view class="top">
			<view class="video_tit">
				<view @click="change(0)" class="itemss " :class="data.payStatus==0?'itemsselect':''">
					未结算
					<view class="xs" v-show="data.payStatus==0"></view>
				</view>
				<view @click="change(1)" class="itemss" :class="data.payStatus==1?'itemsselect':''">
					已结算
					<view class="xs" v-show="data.payStatus==1"></view>
				</view>
			</view>
		</view>
		<view class="ulist">
			<view class="item flex" v-for="(item,index) in data.orderList" :key="index" @click="select(item)">
				<view class="" v-if="data.payStatus == 0">
					<image v-if="item.isclick" class="radio" src="/static/radioact.png" mode=""></image>
					<image v-else class="radio" src="/static/radio.png" mode=""></image>
				</view>
				<view class="item_s flex">
					<image src="/static/qb.png" mode=""></image>
					<view class="item_r">
						<view class="t1">
							订单号:{{item.orderNumber}}
						</view>
						<view class="flex_jc_sb" style="margin-top: 10rpx;">
							<view class="t2">
								{{$formatDate(item.createTime)}}
							</view>
							<view class="pr">
								<text>￥</text>{{item.payAmount}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="k1" v-if="data.nolist">
			<image src="/static/ykong.png" mode=""></image>
			<view class="texts">
				暂无账单记录
			</view>
		</view>

		<view class="" style="height: 220rpx;"></view>
		<view class="footerbtn" v-if="data.payStatus == 0">
			<view class="cont">
				<view class="btn" @click="handleSubmit">
					立即支付
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ordersMonth,
		ordersMonthPay
	} from '@/common/http.api.js'
	import {
		chattering
	} from '@/common/cont.js'
	const data = reactive({
		payStatus: 0,
		orderList: [],
		nolist: false
	})

	const params = ref({
		pageNum: 1,
		pageSize: 10,
		payStatus: 0
	})

	function getlist() {
		ordersMonth(params.value).then(res => {
			res.rows.forEach(item => item.isclick = false)
			data.orderList.push(...res.rows)
			let total = Math.ceil(res.total / params.value.pageSize);
			data.nolist = total == 0
		})
	}
	onLoad(() => {
		getlist()
	})

	function change(type) {
		data.payStatus = type
		params.value.payStatus = type
		data.orderList = []
		params.pageNum = 1
		getlist()
	}

	function select(item) {
		item.isclick = !item.isclick
	}

	function handleSubmit() {
		if (data.orderList.some(item => item.isclick)) {
			let ids = data.orderList.filter((item => {
				return item.isclick
			})).map(i => {
				return i.id
			})
			uni.showLoading({
				title:'支付中...'
			})
			console.log(ids);
			chattering(() => {
				ordersMonthPay({ids}).then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						uni.requestPayment({
							"provider": "wxpay", //固定值为"wxpay"
							appid: res.data.appId, // 应用ID（AppID）
							package: res.data.packageVal, // 固定值
							nonceStr: res.data.nonceStr, // 随机字符串
							timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
							signType: res.data.signType, // 签名，这里用的 MD5 签名
							paySign: res.data.paySign,
							success: function(res) {
								uni.showToast({
									icon: 'none',
									title: '支付成功'
								})
								data.orderList = []
								params.pageNum = 1
								getlist()
							},
							fail: function(err) {
								uni.showToast({
									icon: 'none',
									title: '支付取消'
								})
							}
						});
					}
				})
			})
		} else {
			uni.showToast({
				title: '请选择订单',
				icon: 'none'
			})
		}

	}
</script>

<style lang="scss">
	.k1 {
		text-align: center;
		margin: 200rpx auto;
		width: 320rpx;

		image {
			width: 320rpx;
			height: 300rpx;
		}

		.texts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin-top: 10rpx;
		}
	}

	.top {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		align-items: center;
		padding: 0rpx 20rpx 0rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: sticky;
		top: 0rpx;
		z-index: 9;
		border-bottom: 1px solid #DADADA;

		.video_tit {
			display: flex;
			justify-content: space-around;
			width: 710rpx;

			.itemss {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #8E8E8E;
			}

			.itemsselect {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FF7700;
			}

			.xs {
				width: 32rpx;
				height: 6rpx;
				background: #FF7700;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin: 26rpx auto 0rpx;
			}

		}
	}

	.ulist {
		.item {
			width: 710rpx;
			margin: 28rpx auto;
			padding-bottom: 28rpx;
			border-bottom: 1px solid #efefef;

			.radio {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.item_s {
				flex: 1;

				image {
					width: 56rpx;
					height: 56rpx;
				}

				.item_r {
					margin-left: 20rpx;
					flex: 1;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
					}

					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #B5B5BB;
					}

					.pr {
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 32rpx;
						color: #000000;

						text {
							font-size: 26rpx;
						}
					}
				}
			}
		}

		.item:last-child {
			border: none;
		}
	}

	.footerbtn {
		width: 750rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		height: 120rpx;
		box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			display: flex;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			padding: 20rpx 20rpx 20rpx 40rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.btn {
				width: 670rpx;
				height: 80rpx;
				background: #FF7700;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
</style>